import { BaseUISelect } from '@lingma/base-ui__select'
import { Card, Space, Typography } from 'antd'
import { useState } from 'react'

const { Title, Paragraph, Text } = Typography

// 带颜色的选项数据
const colorOptions = [
  { label: '金色', value: 'gold', color: 'gold' },
  { label: '青柠', value: 'lime', color: 'lime' },
  { label: '绿色', value: 'green', color: 'green' },
  { label: '青色', value: 'cyan', color: 'cyan' },
  { label: '蓝色', value: 'blue', color: 'blue' },
  { label: '紫色', value: 'purple', color: 'purple' },
  { label: '红色', value: 'red', color: 'red' },
  { label: '橙色', value: 'orange', color: 'orange' },
]

export const SelectDemo = () => {
  // 带颜色模式的状态
  const [colorValue, setColorValue] = useState<Array<string | number>>(['gold', 'cyan'])

  return (
    <Space direction="vertical" size="large" style={{ width: '100%' }}>
      <Title level={2}>BaseUISelect 组件示例</Title>
      <Card title="带颜色的多选模式" variant="borderless">
        <Space direction="vertical" style={{ width: '100%' }}>
          <Paragraph>
            启用 <Text code>withColors</Text> 属性后,选中的标签会显示对应的颜色,
            让选择结果更加直观和美观。
          </Paragraph>
          <BaseUISelect
            style={{ width: 500 }}
            placeholder="请选择颜色标签"
            options={colorOptions}
            withColors
            multiple
            showSearch
            value={colorValue}
            onChange={(value) => {
              setColorValue(value as Array<string | number>)
              // console.log('带颜色模式值变化:', value)
            }}
          />
          <Text type="secondary">当前选中: {JSON.stringify(colorValue)}</Text>
        </Space>
      </Card>
    </Space>
  )
}
